<template>
  <view>
    <u-navbar :border-bottom="false" :is-back="true" :title="navTitle" :custom-back="customBack"></u-navbar>
    <u-search bg-color='#FFFFFF' v-model="query.name" placeholder="请输入表单名称进行搜索" margin="35rpx" @custom="search"
      @search="search">
    </u-search>
    <scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
      <u-card v-for="(form,index) of list" @click="handleOpenDir(form)" :key="form.id">
        <view class="u-flex u-row-between" slot="head">
          <view class="u-card__head--left u-flex u-line-1">
            <image src="../../static/tduck/form/dir.png" class="u-m-r-20 icon" v-if="form.folder"></image>
            <text class="u-card__head--left__title u-line-1">{{ form.name }}</text>
          </view>
          <view class="u-card__head--right u-line-1">

          </view>
        </view>
        <view  slot="body">
          <view>
            <u-badge :is-dot="true" type="primary" v-if="form.status==1"></u-badge>
            <u-badge :is-dot="true" type="success" v-if="form.status==2"></u-badge>
            <u-badge :is-dot="true" type="error" v-if="form.status==3"></u-badge>
            <u-tag :text="form.statusDesc" type="success" />
          </view>
          <view class="u-m-t-20">
            <text >
              创建时间：{{ form.createTime }}
            </text>
          </view>
        </view>
        <view slot="foot">
          <u-row gutter="16" v-if="!form.folder">
            <u-col span="4">
              <u-icon name="order" size="34" color="#2b85e4" label="查看"
                @click="$u.route('/pages/form/share?formKey='+form.formKey)"></u-icon>
            </u-col>
            <u-col span="4">
              <u-icon name="list" size="34" color="#2b85e4" label="数据" @click="handleOpenDetail(form,index)"></u-icon>
            </u-col>
            <u-col span="4">
              <u-icon name="more-dot-fill" size="34" color="#2b85e4" label="更多"
                @click="handleOpenAction(form,index)"></u-icon>
            </u-col>
          </u-row>
          <u-row gutter="16" v-else>
            <u-col span="4">
              <view @click.stop="handleRenameFolderDialog(form)">
                <u-icon name="edit-pen" size="34" color="#2b85e4" label="重命名"></u-icon>
              </view>
            </u-col>
            <u-col span="4">
              <view @click.stop="deleteForm(form.formKey,index)">
                <u-icon name="trash" size="34" color="#dd6161" label="删除">
                </u-icon>
              </view>
            </u-col>
          </u-row>
        </view>
      </u-card>
      <view class="loadmore" @click="loadMore">
        <u-loadmore :status="loadStatus"></u-loadmore>
      </view>
    </scroll-view>
    <u-action-sheet :list="tempActionList" v-model="show" @click="handleActionClick"></u-action-sheet>
    <u-empty text="暂无表单" mode="list" v-if="!list.length"></u-empty>
    <u-modal v-model="showRenameModel" title="重命名文件夹名称" @confirm="handleRenameFolder()">
      <view class="slot-content u-p-20">
        <u-input v-model="folderData.name" border />
      </view>
    </u-modal>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        navTitle: '表单列表',
        formData: {
          description: '',
          name: '问卷名称',
          type: "1"
        },
        folderData: {
          name: '文件夹名称',
          type: 3,
          folder: true,
          formKey: ''
        },
        showRenameModel: false,
        tempActionList: [],
        actionList: [{
            text: '发布',
          }, {
            text: '预览'
          }, {
            text: '暂停'
          },
          {
            text: '删除'
          }
        ],
        show: false,
        query: {
          current: 1,
          size: 20,
          name: '',
          folderId: 0
        },
        loadStatus: 'loadmore',
        list: [],
        total: 0,
      };
    },
    onLoad() {
      this.loadList()
    },
    methods: {
      customBack() {
        if (this.query.folderId != 0) {
          this.query.folderId = 0
          this.navTitle = '表单列表'
          this.search()
        } else {
          uni.navigateBack({
            delta: 1
          });
        }
      },
      handleOpenAction(form, index) {
        console.log(form)
        this.show = true
        this.formData = form
        let tempActionList = JSON.parse(JSON.stringify(this.actionList))
        if (form.status === 2) {
          tempActionList.splice(0, 1)
        } else {
          tempActionList.splice(2, 1)
        }
        this.tempActionList = tempActionList
        this.formData.index = index
      },
      handleOpenDetail(form, index) {
        let params = JSON.stringify({
          key: form.formKey,
          title: form.name,
          token: this.vuex_token
        })
        let url = `${this.$u.api.getWebBaseUrl()}/m/project/form/data`
        uni.navigateTo({
          url: `/pages/common/webview?url=${url}&params=${params}`
        })
      },
      handleActionClick(index) {
        if (index == 0) {
          this.$u.api.form.publishForm(this.formData).then(res => {
            this.$u.toast('发布成功')
            this.list[this.formData.index]['statusDesc'] = '收集中'
            this.list[this.formData.index]['status'] = 2
          })
        } else if (index == 1) {
          let params = JSON.stringify({
            key: this.formData.formKey,
            title: this.formData.name
          })
          uni.navigateTo({
            url: `/pages/common/webview?url=${this.$u.api.getWebBaseUrl()}/project/form/view&params=${params}`
          })
        } else if (index == 2) {
          this.$u.api.form.stopForm(this.formData).then(res => {
            this.$u.toast('停止发布')
            this.list[this.formData.index]['statusDesc'] = '停止收集'
            this.list[this.formData.index]['status'] = 1
          })
        } else if (index == 3) {
          this.$u.api.form.logicDeleteForm(this.formData).then(res => {
            this.$u.toast('删除成功')
            this.list.splice(this.formData.index, 1)
          })
        }
      },
      handleOpenDir(form) {
        if (form.folder) {
          this.query.folderId = form.id
          this.navTitle = form.name
          this.search()
        }
      },
      handleRenameFolderDialog(item) {
        this.showRenameModel = true
        this.folderData = item
      },
      /**
       * 重新命名文件夹
       */
      handleRenameFolder() {
        this.$u.api.form.updateForm(this.folderData).then(res => {
          this.$u.toast('修改成功')
          this.showRenameModel = null
        })
      },
      deleteForm(key, index) {
        let that = this
        uni.showModal({
          title: '确认删除该文件夹?',
          success: function(res) {
            if (res.confirm) {
              that.$u.api.form.deleteForm({
                'formKey': key
              }).then(res => {
                if (res) {
                  that.$u.toast('刪除成功')
                  that.list.splice(index, 1)
                }
              })
            }
          }
        });
      },
      loadMore() {
        this.loadStatus = "loading";
        setTimeout(() => {
          this.query.current += 1;
          this.loadList();
        }, 100);
      },
      loadList() {
        this.$u.api.getFormPage(this.query).then(res => {
          if (!res.records || res.records.length == 0) {
            this.loadStatus = "nomore";
            return;
          }
          this.list = this.list.concat(res.records);
          this.total = res.total;
          this.query.current = res.current;
          this.query.size = res.size;
          this.loadStatus = "loadmore";
        });
      },
      search(value) {
        this.list = [];
        this.query.current = 0;
        this.loadList();
      },
    }
  };
</script>
<style lang="scss">
  page {
    background-color: $u-bg-color;
  }
</style>
<style lang="scss" scoped>
  page {
    height: 100%;
    background-color: $u-bg-color;
  }

  .title {
    font-size: 28rpx;
    font-weight: bold;
    color: $u-main-color;
    line-height: 50rpx;
    margin-left: 20rpx;
  }

  .icon {
    width: 40rpx;
    height: 40rpx;
    display: inline-block;
    vertical-align: middle;
  }
</style>
